<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="./index.css" />
</head>

<body>
  <section id="wrap">
    <h2 class="title">百度音乐榜单</h2>
    <ul id="list">
      <!-- <li>
          <input type="checkbox" />
          <span>第一条信息</span>
          <a href="javascript:;" class="collect">收藏</a>
          <a href="javascript:;" class="cancelCollect">取消收藏</a>
          <a href="javascript:;" class="remove">删除</a>
        </li> -->
    </ul>
    <footer class="footer">
      <label><input type="checkbox" id="checkAll" />全选/全不选</label>
      <a href="javascript:;" id="remove">删除</a>
      <input type="text" id="newInfo" />
      <a href="javascript:;" id="add">添加</a>
    </footer>
  </section>
  <script>
    let data = [
      {
        id: 0,
        title: "残酷月光 - 费启鸣",
        checked: true,
        collect: true
      }, {
        id: 1,
        title: "兄弟 - 艾热",
        checked: false,
        collect: false
      }, {
        id: 2,
        title: "毕生 - 夏增祥",
        checked: false,
        collect: true
      }, {
        id: 3,
        title: "公子向北去 - 李春花",
        checked: false,
        collect: false
      }, {
        id: 4,
        title: "战场 - 沙漠五子",
        checked: true,
        collect: false //是否收藏 true 收藏 false 没有收藏
      }
    ];

    class SlectList {
      constructor(data) {
        this.data = JSON.parse(JSON.stringify(data));
        this.ulNode = document.getElementById('list');
        this.checkAllNode = document.getElementById('checkAll');
        this.newInfoNode = document.getElementById('newInfo');
        this.addBtn = document.getElementById('add');
        this.removeAll = document.getElementById('remove');
        this.lis = '';
        this.checkAllNode.onchange = e => this.allClick.bind(this, e)();
        this.addBtn.onclick = this.addItem.bind(this);
        this.removeAll.onclick = this.deleteAll.bind(this);
        this.init(this.data);
      }

      init(data) {
        let liNode = '';

        this.data.map(item => {
          liNode += `
            <li>
              <input type="checkbox" ${item.checked ? "checked" : ''}/>
              <span>${item.title}</span>
              <a href="javascript:;" class="cancel-btn ${item.collect ? "collect" : "cancelCollect"}">${item.collect ? "取消收藏" : "收藏"}</a>
              <a href="javascript:;" class="remove">删除</a>
            </li>
          `;
        })
        this.ulNode.innerHTML = liNode;
        this.lis = Array.from(document.querySelectorAll('#list li'));
        this.addEvent();
        this.judgeAll();
      }

      addEvent() {
        this.lis.map((item, index) => {
          item.onchange = event => this.oneClick.bind(this, event, index)();
          item.querySelector('.cancel-btn').onclick = this.collectItem.bind(this, index);
          item.querySelector('.remove').onclick = this.delete.bind(this, index);
        })
      }

      // 判断是否全选
      judgeAll() {
        let checkedBox = this.data.filter(item => item.checked === true);
        if (checkedBox.length) {
          this.checkAllNode.checked = checkedBox.length === this.lis.length;
          return;
        }
        this.checkAllNode.checked = false;
      }

      // 单击选中框
      oneClick(event, index) {
        let ckd = event.target.checked;
        this.data[index].checked = ckd;
        this.judgeAll();
      }

      // 单击全选
      allClick(event) {
        let ckd = event.target.checked;
        if (ckd === true) {
          this.lis.map((item, index) => {
            item.querySelector('input[type="checkbox"]').checked = true;
            this.data[index].checked = true;
          });
        } else {
          this.lis.map((item, index) => {
            item.querySelector('input[type="checkbox"]').checked = false;
            this.data[index].checked = false;
          });
        }
      }

      // 单击添加
      addItem() {
        let text = this.newInfoNode.value.trim();
        let item = {
          id: this.data.length,
          title: text,
          checked: false,
          collect: false
        };

        this.data.push(item);
        this.init(this.data);
        this.newInfoNode.value = '';
      }

      // 删除
      delete(index) {
        this.data.splice(index, 1);
        this.init(this.data);
      }
      // 删除全部
      deleteAll() {
        this.data = [];
        this.init(this.data);
      }

      // 收藏&取消收藏
      collectItem(index) {
        this.data[index].collect = !this.data[index].collect;
        this.init(this.data);
      }
    }
    let selectList = new SlectList(data);
    console.log(selectList);
  </script>
</body>

</html>